body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, mediumpurple, #000);
}

@mixin func($c: plum, $h: 50%, $t: 25%) {
    background-color: $c;
    height: $h;
    top: $t;
}
.heart {
    width: 280px;
    height: 220px;
    display: flex;
    justify-content: space-between;
    span {
        width: 20px;
        border-radius: 10px;
        position: relative;
        @include func();
        animation: beating 1s infinite;
        &:nth-child(1),
        &:nth-child(9) {
            @include func(lightcoral, 60px, 44px);
        }
        &:nth-child(2),
        &:nth-child(8) {
            @include func(lightskyblue, 120px, 12px);
        }
        &:nth-child(3),
        &:nth-child(7) {
            @include func(lightgreen, 160px, 0px);
        }
        &:nth-child(4),
        &:nth-child(6) {
            @include func(gold, 180px, 16px);
        }

        &:nth-child(5) {
            @include func(plum, 188px, 32px);
        }
    }
}

@keyframes beating {
    60%,70% {
        @include func(plum, 50%, 25%);
        filter:blur(3px)
    }
}
